<style>
	.table-style{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.col-title{
		flex: 1;
		padding-left: 15px;
		width: 30%;
	}
	.col-content{
		flex: 1;
		padding-right: 15px;
		width: 70%;
	}
	.content-wrapper{
		width: 100vw;
	}
</style>
<section class="content" xmlns:th="http://www.thymeleaf.org">
	<div class="row">
    	<div class="col-md-12">
        	<div class="panel">
	            <div class="panel-body">
		            <form id="tableConfigForm" role="form" class="form-horizontal">
						<div class="form-group">
					        <label class="col-md-2 control-label">表名:</label>
					        <div class="col-md-3">
					        	<p class="form-control-static" th:text="${tableConfig?.tableName}"></p>
								<input type="hidden" name="isTree" th:value="${tableConfig?.isTree}"/>
					        </div>
					        <label class="col-md-2 control-label">实体类名:</label>
					        <div class="col-md-3">
					        	<input type="text" name="entityName" class="form-control" th:value="${tableConfig?.entityName}" required="required" maxlength="200"/>
					        </div>
					    </div>
					    <div class="form-group">
					        <label class="col-md-2 control-label">显示多选框:</label>
					        <div class="col-md-3">
					        	<select name="isCheckbox" class="form-control" th:value="${tableConfig?.isCheckbox}" required="required">
									<option value="Y" th:selected="${tableConfig?.isCheckbox == 'Y'}">是</option>
									<option value="N" th:selected="${tableConfig?.isCheckbox == 'N'}">否</option>
								</select>
					        </div>
					        <label class="col-md-2 control-label">是否分页:</label>
						  	<div class="col-md-3">
						  		<select name="isPage" class="form-control" th:value="${tableConfig?.isPage}" required="required">
									<option value="Y" th:selected="${tableConfig?.isPage == 'Y'}">是</option>
									<option value="N" th:selected="${tableConfig?.isPage == 'N'}">否</option>
								</select>
						  	</div>
					    </div>
					    <div class="form-group">
					        <label class="col-md-2 control-label">查询条件列数:</label>
					        <div class="col-md-3">
					        	<select name="searchColumnNum" class="form-control" th:value="${tableConfig?.searchColumnNum}" required="required">
									<option value="1" th:selected="${tableConfig?.searchColumnNum == 1}">1</option>
									<option value="2" th:selected="${tableConfig?.searchColumnNum == 2}">2</option>
									<option value="3" th:selected="${tableConfig?.searchColumnNum == 3}">3</option>
									<option value="4" th:selected="${tableConfig?.searchColumnNum == 4}">4</option>
								</select>
					        </div>
					        <label class="col-md-2 control-label">维护页面列数:</label>
						  	<div class="col-md-3">
						  		<select name="formColumnNum" class="form-control" th:value="${tableConfig?.formColumnNum}" required="required">
									<option value="1" th:selected="${tableConfig?.formColumnNum == 1}">1</option>
									<option value="2" th:selected="${tableConfig?.formColumnNum == 2}">2</option>
									<option value="3" th:selected="${tableConfig?.formColumnNum == 3}">3</option>
									<option value="4" th:selected="${tableConfig?.formColumnNum == 4}">4</option>
								</select>
						  	</div>
					    </div>
					    <div class="form-group">
					        <label class="col-md-2 control-label">功能描述:</label>
					        <div class="col-md-8">
					        	<input type="text" name="description" class="form-control" th:value="${tableConfig?.description}" required="required" maxlength="200"/>
					        </div>
					    </div>
					   	<div class="table-style">
					    	<div class="col-title">
					    		<div class="table-scrollable">
						    		<table class="table table-striped">
							    		<thead>
							    			<tr style="background-color: #ddd;">
							    				<th>#</th>
												<th>列名</th>
												<th>列类型</th>
											</tr>
										</thead>
										<tbody>
											<tr th:each="field,row : ${tableConfig.fieldConfigs}">
												<td>
							    					<p class="form-control-static" th:text="${row.count}"></p>
							    				</td>
							    				<td>
							    					<p class="form-control-static">
							    						<i class="fa fa-key" th:if="${field.primaryKey == 'Y'}" style="color: red;"></i>
							    						<span th:text="${field.fieldName}"></span>
							    					</p>
							    				</td>
							    				<td>
							    					<p class="form-control-static" style="min-width: 100px;">
														<span th:text="${field.fieldType}"></span>
														<span th:if="${field.fieldLength > 0}">(</span><span th:text="${field.fieldLength}" th:if="${field.fieldLength > 0}"></span><span th:if="${field.fieldLength > 0}">)</span>
													</p>
							    				</td>
											</tr>
										</tbody>
								    </table>
								</div>
					    	</div>
					    	<div class="col-content">
					    		<div class="table-scrollable">
							    	<table class="table table-striped">
							    		<thead>
							    			<tr style="background-color: #ddd;">
												<th>描述</th>
												<th>属性名</th>
												<th>属性类型</th>
												<th>列表显示</th>
												<th>列表查询</th>
												<th>列表排序</th>
												<th>表单维护</th>
												<th>组件类型</th>
												<th>验证类型</th>
												<th>展示顺序</th>
							    			</tr>
							    		</thead>
							    		<tbody>
							    			<tr th:each="field,row : ${tableConfig.fieldConfigs}">
							    				<td>
							    					<div style="width: 120px;">
							    						<input type="text" th:name="'fieldConfigs['+${row.index}+'].description'" th:value="${field.description}" class="form-control" required="required"/>
							    						<input type="hidden" th:name="'fieldConfigs['+${row.index}+'].id'" th:value="${field.id}"/>
							    						<input type="hidden" th:name="'fieldConfigs['+${row.index}+'].fieldName'" th:value="${field.fieldName}"/>
							    						<input type="hidden" th:name="'fieldConfigs['+${row.index}+'].fieldType'" th:value="${field.fieldType}"/>
							    						<input type="hidden" th:name="'fieldConfigs['+${row.index}+'].fieldLength'" th:value="${field.fieldLength}"/>
							    						<input type="hidden" th:name="'fieldConfigs['+${row.index}+'].primaryKey'" th:value="${field.primaryKey}"/>
							    						<input type="hidden" th:name="'fieldConfigs['+${row.index}+'].nullable'" th:value="${field.nullable}"/>
							    					</div>
							    				</td>
							    				<td>
							    					<div style="width: 100px;">
							    						<input type="text" th:name="'fieldConfigs['+${row.index}+'].propertyName'" th:value="${field.propertyName}" class="form-control" required="required"/>
							    					</div>
							    				</td>
							    				<td>
							    					<div style="width: 120px;">
							    						<select class="form-control" th:name="'fieldConfigs['+${row.index}+'].propertyType'" th:value="${field.propertyType}">
															<option value="String" th:selected="${field.propertyType eq 'String'}">String</option>
															<option value="Integer" th:selected="${field.propertyType eq 'Integer'}">Integer</option>
															<option value="Long" th:selected="${field.propertyType eq 'Long'}">Long</option>
															<option value="Float" th:selected="${field.propertyType eq 'Float'}">Float</option>
															<option value="Double" th:selected="${field.propertyType eq 'Double'}">Double</option>
															<option value="Date" th:selected="${field.propertyType eq 'Date'}">Date</option>
															<option value="BigDecimal" th:selected="${field.propertyType eq 'BigDecimal'}">BigDecimal</option>
														</select>
							    					</div>
							    				</td>
							    				<td align="center">
							    					<label class="checkbox-inline c-checkbox">
							    						<input type="hidden" th:name="'fieldConfigs['+${row.index}+'].listShow'" th:value="${field.listShow}"/>
			  											<input type="checkbox" th:checked="${field.listShow == 'Y'}"/>
			  											<i class="fa fa-check"></i>
							    					</label>
							    				</td>
							    				<td>
							    					<div style="width: 110px;">
									  					<select th:name="'fieldConfigs['+${row.index}+'].listQuery'" class="form-control" th:value="${field.listQuery}">
															<option value="N" th:selected="${field.listQuery eq 'N'}">无</option>
									  						<option value="=" th:selected="${field.listQuery eq '='}">等于</option>
															<option value="like" th:selected="${field.listQuery eq 'like'}">模糊查询</option>
															<option value="interval" th:selected="${field.listQuery eq 'interval'}">区间查询</option>
															<option value="between" th:selected="${field.listQuery eq 'between'}">between</option>
									  						<option value=">" th:selected="${field.listQuery eq '>'}">大于</option>
									  						<option value=">=" th:selected="${field.listQuery eq '>='}">大于等于</option>
									  						<option value="<" th:selected="${field.listQuery eq '<'}">小于</option>
									  						<option value="<=" th:selected="${field.listQuery eq '<='}">小于等于</option>
															<option value="!=" th:selected="${field.listQuery eq '!='}">不等于</option>
									  					</select>
								  					</div>
							    				</td>
												<td>
													<div style="width: 80px;">
														<select th:name="'fieldConfigs['+${row.index}+'].listSort'" class="form-control" th:value="${field.listSort}">
															<option value="N" th:selected="${field.listSort eq 'N'}">无</option>
															<option value="asc" th:selected="${field.listSort eq 'asc'}">升序</option>
															<option value="desc" th:selected="${field.listSort eq 'desc'}">降序</option>
														</select>
													</div>
												</td>
							    				<td align="center">
							    					<label class="checkbox-inline c-checkbox">
							    						<input type="hidden" th:name="'fieldConfigs['+${row.index}+'].formShow'" th:value="${field.formShow}"/>
			  											<input type="checkbox" th:checked="${field.formShow == 'Y'}"/>
			  											<i class="fa fa-check"></i>
							    					</label>
							    				</td>
							    				<td>
							    					<div style="width: 100px;">
									  					<select th:name="'fieldConfigs['+${row.index}+'].componentType'" class="form-control" th:value="${field.componentType}">
									  						<option value="text" th:selected="${field.componentType eq 'text'}">文本框</option>
															<option value="date" th:selected="${field.componentType eq 'date'}">日期</option>
															<option value="select" th:selected="${field.componentType eq 'select'}">下拉框</option>
															<option value="textarea" th:selected="${field.componentType eq 'textarea'}">文本域</option>
									  						<option value="password" th:selected="${field.componentType eq 'password'}">密码</option>
									  						<option value="radio" th:selected="${field.componentType eq 'radio'}">单选</option>
									  						<option value="checkbox" th:selected="${field.componentType eq 'checkbox'}">多选</option>
									  					</select>
								  					</div>
							    				</td>
							    				<td>
							    					<div style="width: 100px;">
							    						<select th:name="'fieldConfigs['+${row.index}+'].formValidType'" class="form-control" th:value="${field.formValidType}">
							    							<option value="N" th:selected="${field.formValidType eq 'N'}">无</option>
									  						<option value="required" th:selected="${field.formValidType eq 'required'}">必填</option>
									  						<option value="email" th:selected="${field.formValidType eq 'email'}">邮箱</option>
									  					</select>
								  					</div>
							    				</td>
							    				<td>
							    					<div style="width: 40px;">
								  						<input type="text" th:name="'fieldConfigs['+${row.index}+'].orderNo'" th:value="${field.orderNo}" class="form-control"/>
								  					</div>
							    				</td>
							    			</tr>
							    		</tbody>
							    	</table>
							    </div>
					    	</div>
					    </div>
					    <input type="hidden" name="id" th:value="${tableConfig?.id}"/>
					    <input type="hidden" name="tableName" th:value="${tableConfig?.tableName}">
		            </form>
	            </div>
	            <div class="panel-footer">
	            	<div class="row">
		            	<div class="col-md-9 col-md-offset-3">
							<button type="button" class="btn btn-primary" onclick="update()">保存</button>
				          	<button type="button" class="btn btn-default" onclick="forwardPage('/tableConfig/init')">取消</button>
				        </div>
			        </div>
	            </div>
	        </div>
		</div>
	</div>
	<script th:src="@{/js/tableConfig/tableConfig.js}"></script>
</section>
